<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <style>
        /* ... (你的样式，保持不变) ... */
    </style>
</head>

<body>
<h1>商品管理</h1>

<div class="form-container">
    <h2>添加商品</h2>
    <form action="/products/add" method="post" th:object="${product}">  <!-- 将  action 指向后端接口 -->
        <label for="productName">商品名称:</label>
        <input type="text" id="productName" name="name" >

        <label for="productPrice">商品价格:</label>
        <input type="number" id="productPrice" name="price" >

        <label for="productDescription">商品描述:</label>
        <input type="text" id="productDescription" name="description" >

        <button type="submit">添加</button>  <!-- 修改为 type="submit" -->
    </form>
</div>

<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>描述</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="productTableBody">
    <tr th:each="product : ${productList}">
        <td th:text="${product.id}"></td>
        <td th:text="${product.name}"></td>
        <td th:text="${product.price}"></td>
        <td th:text="${product.description}"></td>
        <td class="actions">
            <a th:href="@{/products/edit/{id}(id=${product.id})}">编辑</a>
            <a th:href="@{/products/delete/{id}(id=${product.id})}">删除</a>
        </td>
    </tr>
    </tbody>
</table>

<!--  移除所有 JavaScript 代码  -->

</body>
</html>
